<template>
  <div>

    <el-tabs v-model="activeName" type="card" @tab-click="handleClick" size="small">
      <el-tab-pane label="个股流向" name="first">
        <GpBaseTable primary-key="id" :columns="columns" :url="url"  ref="capitalFlowTable" sync-data-url="/xcdhTrading/capitalFlow/syncCapitalFlow">
        </GpBaseTable>
      </el-tab-pane>
      <el-tab-pane label="行业资金流向" name="industry">
        <GpBaseTable primary-key="id" :columns="industryColumns"
                     url="/xcdhTrading/industryCapitalFlow/v2/listByPage"
                     ref="industryCapitalFlowTable"
                     sync-data-url="/xcdhTrading/industryCapitalFlow/syncIndustryCapitalFlow">
        </GpBaseTable>
      </el-tab-pane>
      <el-tab-pane label="板块流向" name="sector">
        <GpBaseTable primary-key="id" :columns="sectorColumns"
                     url="/xcdhTrading/sectorCapitalFlow/v2/listByPage"  ref="sectorCapitalFlowTable"
                     sync-data-url="/xcdhTrading/sectorCapitalFlow/syncSectorCapitalFlow">
        </GpBaseTable>
      </el-tab-pane>


      <el-tab-pane label="游资" name="second" :disabled="true">
        <GpBaseTable   primary-key="id" :columns="hotMoneyColumns"
                       :mounted-load="false"
                       ref="hotMoneyTable"
                       url="/xcdhTrading/hotMoneyTrc/v2/listByPage"
                       :params="getHotMoneyParam"
                       sync-data-url="/xcdhTrading/hotMoneyTrc/syncHotMoneyTrc">
        </GpBaseTable>
      </el-tab-pane>
      <el-tab-pane label="竞价" name="jingJia" :disabled="true">
        <GpBaseTable   primary-key="id" :columns="stockBiddingColumns"
                       :mounted-load="false"
                       ref="stockBiddingTable"
                       :params="getHotMoneyParam"
                       url="/xcdhTrading/stockBidding/v2/listByPage"
                       sync-data-url="/xcdhTrading/stockBidding/syncDayBidding">
        </GpBaseTable>
      </el-tab-pane>
      <el-tab-pane label="历史涨停" name="liShi" :disabled="true">
        <GpBaseTable   primary-key="id" :columns="ztStockColumns"
                       :mounted-load="false"
                       ref="ztStockTable"
                       :params="getHotMoneyParam"
                       url="/xcdhTrading/ztStock/v2/listByPage"
                       sync-data-url="/xcdhTrading/ztStock/syncZtStock">
        </GpBaseTable>
      </el-tab-pane>
      <el-tab-pane label="交易明细" name="trDetails" :disabled="true">
        <GpBaseTable   primary-key="id" :columns="trDetailsColumns"
                       :mounted-load="false"
                       ref="trDetailsTable"
                       :params="getHotMoneyParam"
                       url="/xcdhTrading/day-transaction-data/v2/listByPage"
                       sync-data-url="/xcdhTrading/day-transaction-data/syncTransactionData">
        </GpBaseTable>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import http from "network/http";

export default {
  name: "capitalFlowStock",
  data(){
    return {
      activeName: 'first',
      formData:{tradeDate: ""} ,
      tradeDateCode: '' ,
      url: "/xcdhTrading/capitalFlow/v2/listByPage",
      tsCodes:[],
      currRow: null ,
      columns:[
        {
          "title": "交易日期",
          "key": "tradeDate",
          search: true ,
          is: "el-date-picker" ,
          attrs:{
            "value-format":"yyyyMMdd"
          }
        },
        {
          "title": "股票名称",
          search: true ,
          op: 'LIKE',
          "key": "name"
        },
        {
          "title": "涨跌幅",
          "key": "pctChange",
          tableIs: "NumberColumn"
        },
        {
          "title": "最新价",
          "key": "showPrice",
          tableIs: "ShowGpPrice"
        },
        {
          "title": "今日主力净流入额（万元）",
          "key": "netAmount",
          tableIs: "BigNumberColumn" ,
          unit: '万',
          attrs:{
            width: 100
          }
        },
        {
          "title": "今日超大单净流入额（万元）",
          "key": "buyElgAmount",
          tableIs: "BigNumberColumn" ,
          unit: '万',
          attrs:{
            width: 100
          }
        },
        {
          "title": "今日大单净流入额（万元）",
          "key": "buyLgAmount",
          tableIs: "BigNumberColumn" ,
          unit: '万',
          attrs:{
            width: 100
          }
        },
        {
          "title": "今日中单净流入额（万元）",
          "key": "buyMdAmount",
          tableIs: "BigNumberColumn" ,
          unit: '万',
          attrs:{
            width: 100
          }
        },
        {
          "title": "今日小单净流入额（万元）",
          "key": "buySmAmount",
          tableIs: "BigNumberColumn" ,
          unit: '万',
          attrs:{
            width: 100
          }
        },
        {
          title: '操作' ,
          type: 'action',
          attrs:{
            width: 260
          },
          buttons: [
            {
              is: 'el-button' ,
              title: '跟踪游资',
              attrs: {
                type: 'text'
              },
              click:(row)=>{
                this.activeName = "second" ;
                this.currRow = row
                this.tsCodes = [row.tsCode]
                this.$nextTick(()=>{
                  this.$refs.hotMoneyTable.handlerQueryListByPage(
                      [
                        {
                          key: 'tsCode' ,
                          op: 'EQ',
                          value: row.tsCode
                        },
                        {
                          key: 'tradeDate' ,
                          op: 'EQ',
                          value: this.tradeDateCode
                        }
                      ]
                  )
                })
              }
            },
            {
              is: 'el-button' ,
              title: '竞价',
              attrs: {
                type: 'text'
              },
              click:(row)=>{
                this.activeName = "jingJia" ;
                this.currRow = row
                this.tsCodes = [row.tsCode]
                this.$nextTick(()=>{
                  this.$refs.stockBiddingTable.handlerQueryListByPage(
                      [
                        {
                          key: 'tsCode' ,
                          op: 'EQ',
                          value: row.tsCode
                        },
                        {
                          key: 'tradeDate' ,
                          op: 'EQ',
                          value: this.tradeDateCode
                        }
                      ]
                  )
                })
              }
            },
            {
              is: 'el-button' ,
              title: '历史涨停',
              attrs: {
                type: 'text'
              },
              click:(row)=>{
                this.currRow = row
                this.activeName = "liShi" ;
                this.tsCodes = [row.tsCode]
                this.$nextTick(()=>{
                  this.$refs.ztStockTable.handlerQueryListByPage(
                      [
                        {
                          key: 'tsCode' ,
                          op: 'EQ',
                          value: row.tsCode
                        }
                      ]
                  )
                })
              }
            },
            {
              is: 'el-button' ,
              title: '交易明细',
              attrs: {
                type: 'text'
              },
              click:(row)=>{
                this.activeName = "trDetails" ;
                this.currRow = row
                this.tsCodes = [row.tsCode]
                this.$nextTick(()=>{
                  this.$refs.trDetailsTable.handlerQueryListByPage(
                      [
                        {
                          key: 'tsCode' ,
                          op: 'EQ',
                          value: row.tsCode
                        }
                      ]
                  )
                })
              }
            },
          ]
        }
      ],
      industryColumns:  [
        {
          "title": "交易日期",
          "key": "tradeDate",
          search: true ,
          is: "el-date-picker" ,
          attrs:{
            width: 100 ,
            "value-format":"yyyyMMdd"
          }
        },
        {
          "title": "板块名称",
          "key": "industry",
          op: "LIKE" ,
          search: true ,
        },
        {
          "title": "股票名称",
          "key": "leadStock",
          op: "LIKE" ,
          search: true ,
        },
        {
          key: 'showPrice' ,
          title: '股票价格',
          tableIs: "ShowGpPrice"
        },
        {
          "title": "指数涨跌幅",
          "key": "pctChange",
          tableIs: "NumberColumn"
        },
        {
          "title": "流入资金",
          "key": "netBuyAmount",
          tableIs: "YiNumberColumn"
        },
        {
          "title": "流出资金 ",
          "key": "netSellAmount",
          tableIs: "YiNumberColumn"
        },
        {
          "title": "净额",
          "key": "netAmount",
          tableIs: "YiNumberColumn"
        },
        {
          "title": "公司数量",
          "key": "companyNum"
        },
        {
          "title": "领涨股涨跌幅",
          "key": "pctChangeStock"
        },
        {
          "title": "领涨股最新价",
          "key": "closePrice"
        },
        {
          title: '操作' ,
          type: 'action',
          attrs:{
            width: 260
          },
          buttons: [
            {
              is: 'el-button' ,
              title: '跟踪游资',
              attrs: {
                type: 'text'
              },
              click:()=>{
                this.toTrade('hotMoneyTable' , "second")
              }
            },
            {
              is: 'el-button' ,
              title: '交易明细',
              attrs: {
                type: 'text'
              },
              click:()=>{
                this.toTrade('trDetailsTable' , "trDetails")
              }
            },
          ]
        }
      ],
      sectorColumns:  [
        {
          "title": "交易日期",
          "key": "tradeDate",
          search: true ,
          is: "el-date-picker" ,
          attrs:{
            width: 100 ,
            "value-format":"yyyyMMdd"
          }

        },
        {
          "title": "数据类型",
          "key": "contentType"
        },
        {
          "title": "DC板块代码",
          "key": "tsCode"
        },
        {
          "title": "板块名称",
          "key": "name",
          search: true ,
          op: "LIKE"
        },
        {
          "title": "板块涨跌幅（%）",
          "key": "pctChange",
          tableIs: "NumberColumn"
        },
        {
          key: 'showPrice' ,
          title: '股票价格',
          tableIs: "ShowGpPrice"
        },
        {
          "title": "今日主力净流入最大股",
          "key": "buySmAmountStock",
        },
        {
          "title": "主力净流入净额（元）",
          "key": "netAmount",
          tableIs: "BigNumberColumn"
        },
        {
          "title": "超大单净流入净额（元）",
          "key": "buyElgAmount",
          tableIs: "BigNumberColumn"
        },
        {
          "title": "大单净流入净额（元）",
          "key": "buyLgAmount",
          tableIs: "BigNumberColumn"
        },
        {
          "title": "中单净流入净额（元）",
          "key": "buyMdAmount",
          tableIs: "BigNumberColumn"
        },
        {
          "title": "小单净流入净额（元）",
          "key": "buySmAmount",
          tableIs: "BigNumberColumn"
        }
      ] ,
      stockBiddingColumns:[
        {
          "title": "数据日期",
          "key": "tradeDate",
          is: "el-date-picker" ,
          attrs:{
            width: 100 ,
            "value-format":"yyyyMMdd"
          }

        },
        {
          "title": "股票名称",
          "key": "name",
        },
        {
          "title": "成交量（股）",
          "key": "vol"
        },
        {
          "title": "成交均价（元）",
          "key": "price"
        },
        {
          "title": "成交金额（元）",
          "key": "amount"
        },
        {
          "title": "昨收价（元）",
          "key": "preClose"
        },
        {
          "title": "换手率（%）",
          "key": "turnoverRate"
        },
        {
          "title": "量比",
          "key": "volumeRatio"
        },
        {
          "title": "流通股本（万股）",
          "key": "floatShare"
        },
        {
          title: '操作' ,
          type: 'action',
          attrs:{
            width: 260
          },
          buttons: [
            {
              is: 'el-button' ,
              title: '跟踪游资',
              attrs: {
                type: 'text'
              },
              click:()=>{
                this.toTrade('hotMoneyTable' , "second")
              }
            },
            {
              is: 'el-button' ,
              title: '跟踪主力',
              attrs: {
                type: 'text'
              },
              click:()=>{
                this.toTrade('capitalFlowTable' , "first")
              }
            },
            {
              is: 'el-button' ,
              title: '历史涨停',
              attrs: {
                type: 'text'
              },
              click:()=>{
                this.toTrade('ztStockTable' , "liShi")
              }
            },
            {
              is: 'el-button' ,
              title: '交易明细',
              attrs: {
                type: 'text'
              },
              click:()=>{
                this.toTrade('trDetailsTable' , "trDetails")
              }
            },
          ]
        }
      ],
      ztStockColumns:[
        {
          "title": "交易日期",
          "key": "tradeDate"
        },
        {
          "title": "所属行业",
          "key": "industry"
        },
        {
          "title": "股票名称",
          "key": "name"
        },
        {
          key: 'showPrice' ,
          title: '股票价格',
          tableIs: "ShowGpPrice"
        },
        {
          "title": "成交额",
          "key": "amount"
        },
        {
          "title": "换手率",
          "key": "turnoverRatio"
        },
        {
          "title": "炸板次数",
          "key": "openTimes"
        },
        {
          "title": "涨停统计",
          "key": "upStat"
        },
        {
          "title": "连板数",
          "key": "limitTimes"
        },
        {
          "title": "D跌停U涨停Z炸板",
          "key": "limit"
        },
        {
          "title": "封单金额",
          "key": "fdAmount"
        },
        {
          "title": "板上成交金额",
          "key": "limitAmount"
        },
        {
          "title": "首次封板时间",
          "key": "firstTime"
        },
        {
          "title": "最后封板时间",
          "key": "lastTime"
        },
        {
          title: '操作' ,
          type: 'action',
          attrs:{
            width: 100
          },
          buttons: [
            {
              is: 'el-button' ,
              title: '跟踪游资',
              attrs: {
                type: 'text'
              },
              click:()=>{
                this.toTrade('hotMoneyTable' , "second")
              }
            }
          ]
        }
      ] ,
      trDetailsColumns: [
        {
          "title": "交易日期",
          "key": "tradeDate"
        },
        {
          "title": "股票名称",
          "key": "name"
        },
        {
          "title": "收盘价",
          "key": "showPrice",
          tableIs: "ShowGpPrice"
        },
        {
          "title": "涨跌幅",
          "key": "pctChg",
          tableIs: "NumberColumn"
        },
        {
          "title": "成交额",
          "key": "amount"
        },
        {
          "title": "成交量",
          "key": "vol"
        },
        {
          title: '操作' ,
          type: 'action',
          attrs:{
            width: 100
          },
          buttons: [
            {
              is: 'el-button' ,
              title: '跟踪游资',
              attrs: {
                type: 'text'
              },
              click:()=>{
                this.toTrade('hotMoneyTable' , "second")
              }
            }
          ]
        }
      ],
      hotMoneyColumns: [
        {
          "title": "交易日期",
          "key": "tradeDate",
          is: "el-date-picker" ,
          attrs:{
            "value-format":"yyyyMMdd"
          }
        },
        {
          "title": "股票名称",
          op: 'LIKE' ,
          "key": "tsName"
        },
        {
          "title": "买入金额（元）",
          "key": "buyAmount"
        },
        {
          "title": "卖出金额（元）",
          "key": "sellAmount"
        },
        {
          "title": "净买卖（元）",
          "key": "netAmount"
        },
        {
          "title": "游资名称",
          "key": "hmName"
        },
        {
          title: '操作' ,
          type: 'action',
          attrs:{
            width: 230
          },
          buttons: [
            {
              is: 'el-button' ,
              title: '跟踪主力',
              attrs: {
                type: 'text'
              },
              click:()=>{
                this.toTrade('capitalFlowTable' , "first")
              }
            },
            {
              is: 'el-button' ,
              title: '竞价',
              attrs: {
                type: 'text'
              },
              click:()=>{
                this.toTrade('stockBiddingTable' , "jingJia")
              }
            },
            {
              is: 'el-button' ,
              title: '历史涨停',
              attrs: {
                type: 'text'
              },
              click:()=>{
                this.toTrade('ztStockTable' , "liShi")
              }
            },
            {
              is: 'el-button' ,
              title: '交易明细',
              attrs: {
                type: 'text'
              },
              click:()=>{
                this.toTrade('trDetailsTable' , "trDetails")
              }
            },
          ]
        }
      ],
    }
  },
  created() {
    this.getNewTradeDate()
  },
  methods:{
    toTrade(tableId , to){
      this.activeName = to ;
      let row = this.currRow
      this.$nextTick(()=>{
        this.$refs[tableId].handlerQueryListByPage(
            [
              {
                key: 'tsCode' ,
                op: 'EQ',
                value: row.tsCode
              },
              {
                key: 'tradeDate' ,
                op: 'EQ',
                value: this.tradeDateCode
              }
            ]
        )
      })
    },
    getNewTradeDate(){
      http.post("/xcdhTrading/stock-info/newTradeDate").then(res=>{
        this.formData.tradeDate = res.data.tradeDate
        this.tradeDateCode = res.data.tradeDateCode
      })
    },
    handleClick(){

    },
    getHotMoneyParam(){
      return [
        {
          key: 'tsCode' ,
          op: 'IN',
          value: this.tsCodes
        }
      ]
    },
  }
}
</script>

<style scoped>

</style>
